<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>2022年日冕观测数据</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="{% static 'JS/jquery-3.6.4.js' %}"></script>
    <link rel="stylesheet" href="{% static 'CSS/bootstrap.min.css' %}">
    <script src="{% static 'JS/bootstrap.min.js' %}"></script>
    <style>
        body {
            background-color: #f2f2f2;
        }
        .header {
            background-color: #FF8C00;
            color: white;
            padding: 10px;
            text-align: center;
        }
        .form-container {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 10px;
            padding: 15px;
        }
        .calendar-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #FF8C00;
            margin: 20px 0;
        }
        .legend {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin: 10px 0;
            font-weight: bold;
        }
        .legend div {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .legend .green { background-color: green; width: 20px; height: 20px; }
        .legend .yellow { background-color: yellow; width: 20px; height: 20px; }
        .legend .red { background-color: red; width: 20px; height: 20px; }
        .calendar-table {
            background-color: white;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            padding: 10px;
            margin: 10px;
        }
        .calendar-table h4 {
            text-align: center;
            margin-top: 10px;
            font-weight: bold;
        }
        .table td, .table th {
            text-align: center;
            padding: 8px;
        }
        .green-bg { background-color: green; color: white; }
        .yellow-bg { background-color: yellow; color: black; }
        .red-bg { background-color: red; color: white; }
    </style>
</head>
<body>
    <div class="header">
        <div class="form-container">
            <span>请选择需要浏览数据的年份</span>
            <select name="year" class="form-select">
                <option value="2020">2020</option>
                <option value="2021">2021</option>
                <option value="2022" selected>2022</option>
                <!-- 添加更多年份 -->
            </select>
            <span>以及数据类型</span>
            <select name="type" class="form-select">
                <option value="rimian">日冕数据</option>
            </select>
            <button type="submit" class="btn btn-dark">查询</button>
        </div>
        <p>数据版权属于中科院云南天文台选址与日冕观测组，如果您对我们感兴趣请邮箱我们：lyu@ynao.ac.cn</p>
    </div>

    <div class="calendar-title">2022年日冕观测数据</div>

    <div class="legend">
        <div><div class="green"></div>有观测数据</div>
        <div><div class="yellow"></div>有部分观测数据</div>
        <div><div class="red"></div>没有观测数据</div>
    </div>

    <div class="container">
        <div class="row">
            <!-- 每个月的日历 -->
            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>


            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>

            <div class="col-md-4">
                <div class="calendar-table">
                    <h4>January</h4>
                    <table class="table table-bordered">
                        <thead>
                            <tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>&nbsp;</td><td>&nbsp;</td><td class="green-bg">1</td><td class="green-bg">2</td><td class="green-bg">3</td><td class="green-bg">4</td><td class="green-bg">5</td>
                            </tr>
                            <!-- 添加更多日期 -->
                        </tbody>
                    </table>
                </div>
            </div>



            <!-- 复制上述col-md-4结构，重复创建其他月份 -->
        </div>
    </div>
</body>
</html>
